package TaskStructure
{
	import DensityObjects.DroppingPanel;
	import DensityObjects.FlickingPanel;
	
	import FeedbackObjects.MessageBox;
	
	import flash.display.MovieClip;
	import flash.display.Shape;
	import flash.events.Event;
	
	/** An object of this class is the main display object for the word problem modelling "game".
	 * The underlying MathText and MathTextModeller packages are imported and used to create the word problem display, and
	 * the modelling functionality, respectively
	 */ 
	public class DensityItem extends MovieClip
	{
		// public statics
		public static var SCREEN_WIDTH_CM:Number = 30;
		public static var SCREEN_WIDTH_PX:Number = 1280;
		public static var CM_TO_PX:Number;
		
		private static var BORDER_WIDTH:Number;
		// private vars
		private var item_number:int;
		private var _border:Shape;
		private var _flickingPanel:FlickingPanel;
		private var _droppingPanel:DroppingPanel;
		private var _itemXML:XML;
		
		/** Constructor with just this item from the xml flow document, also problem and context xml */
		public function DensityItem(itemXML:XML, item_number:int=-1)
		{
			this._itemXML = itemXML;	
			this.item_number = item_number;
			// now get the singular context, problem, etc.
			var problemSetName:String = "default";
			this.addEventListener(Event.ADDED_TO_STAGE, handleAdded);
		}
		private function handleAdded (event:Event):void
		{
			this.removeEventListener(Event.ADDED_TO_STAGE, handleAdded);
			this.graphics.drawRect(0, 0, this.parent.width, this.parent.height);
			// calculate conversion ratio
			CM_TO_PX = SCREEN_WIDTH_PX/SCREEN_WIDTH_CM;
			BORDER_WIDTH = this.width/40;
			
			// add flicking panel
			_flickingPanel = new FlickingPanel(this.width*1/2-BORDER_WIDTH/2, this.height);
			this.addChild(_flickingPanel);
			_flickingPanel.addNewMessage("Try flicking the object", 10, 0, MessageBox.PERMANENT_TYPE);
			_flickingPanel.addFlickableMC("RectPrism", 50, 300, 16, 0, .2);
			_flickingPanel.addFlickableMC("RectPrism", 150, 300, 32, 0, .2);
			
			// place border in center
			_border = new Shape();
			_border.graphics.lineStyle(BORDER_WIDTH, 0x444444);
			_border.graphics.moveTo(_flickingPanel.width+BORDER_WIDTH/2, 0);
			_border.graphics.lineTo(_flickingPanel.width+BORDER_WIDTH/2, this.height);
			
			
			// add dropping panel
			_droppingPanel = new DroppingPanel(this.width*1/2-BORDER_WIDTH/2, this.height);
			_droppingPanel.x = _flickingPanel.x + _flickingPanel.width + BORDER_WIDTH;
			this.addChild(_droppingPanel);
			_droppingPanel.addNewMessage("Click the beaker's cover to drop.", 10, 0, MessageBox.EPHEMERAL_TYPE);
			_droppingPanel.addDroppableMC("RectPrism", 2, 0);
			_droppingPanel.addDroppableMC("RectPrism", 3, 0);
			
			this.addChild(_border);
			
		}
		private function handleCompleted (event:Event):void
		{
			this.dispatchEvent( new Event(Event.COMPLETE));
		}
	}
}